<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<table id="demo" lay-filter="demo"></table>
	</body>
</html>
<script src="layui/layui.js"></script>
<script>
	layui.use('table', function() {
		var table = layui.table;
			
			//顶部工具栏触发事件
			table.on('toolbar(demo)', function(obj){
			  var checkStatus = table.checkStatus(obj.config.id);
			  switch(obj.event){
				case 'add':
				console.log(obj)
				  layer.msg('添加');
				break;
				case 'delete':
				
				var checkStatus=table.checkStatus("demo");
					console.log(checkStatus.data);//获取复选框选中的数据
					console.log(checkStatus.data.length);//获取复选框的长度
					
					if(checkStatus.data.length>0){
						layer.msg('批量删除');
					}
				break;
			  };
			});
			
			//数据表格每行的按钮触发事件
			table.on('tool(demo)',function(obj){
				console.log(obj)	//里面可以拿到当前行的所有数据
				switch(obj.event){
					case 'edit':
					// form表单回显数据
					//form.val("form表单中lay-filter的值",obj.data)即可
					layer.msg(1); 
						break;
					case 'del':
					layer.msg(2); 
						break;
				}
			})
			
			//复选框的选中状态
			table.on('checkbox(demo)', function(obj){
			  //console.log(obj); //当前行的一些常用操作集合
			 // console.log(obj.checked); //当前是否选中状态
			  var status=obj.type;	//如果触发的是全选，则为：all，如果触发的是单选，则为：one
			  if(status==="one"){
				  console.log(obj.data); //选中行的相关数据
				  console.log(obj.data.id); //选中行的相关数据
			  }else{
				  console.log("选中全部的数据进行删除"); 
			  }
			
			});
	
		var tableIns=table.render({
			elem: '#demo',	//绑定表格元素,推荐使用id选择器
			toolbar: '#toolbarDemo',	//绑定工具栏的功能
			height: 500,
			/**
			 * 	推荐使用myatis的pagehelper插件
			 *  	返回的json格式必须是下面的格式:后期可以在Java中封装成一个实体类通过springmvc直接返回该封装的实体类即可，不用通过map然后转换为json形式返回，十分麻烦
			 * 		{
					  "code": 0,			
					  "msg": "",
					  "count": 1000,		//数据总量
					  "data": [{}, {}]		//数据集合
					} 
			 */
			url: 'list.json', //异步请求的数据接口,默认会在url地址后面拼接page和limit参数
			page: true ,//开启分页,加入分页后默认使用page(当前页码)和limit(页面大小)作为参数名称,分页的控制器形参就要这么写
			/**
			 *  属性介绍：
			 * 	filed 对应实体类的属性名
			 * 	title：显示在页面的值
			 *  hide：true表示隐藏这列，false表示不隐藏
			 * 	fixed：表示固定在列的位置 有left和right
			 * 	sort：表示是否排序
			 * 	width：表示列占用宽度，数字(代表多少像素，只需要写数字即可)/百分比
			 * 	type:checkbox（复选框列）radio（单选框列）normal（常规列，无需设定）
			 * 	align:对其方式，有：left（默认）、center（居中）、right（居右）三种方式
			 * 	toolbar:开启行工具栏
			 */
			cols: [[ //表头
				  {type:"checkbox",width:80}
			      ,{field: 'id', title: 'ID',sort:true,align:"center"}
			      ,{field: 'username', title: '用户名'}
			      ,{field: 'sex', title: '性别'}
			      ,{field: 'city', title: '城市'} 
			      ,{field: 'sign', title: '签名'}
				  ,{title:"操作",toolbar:"#toolbarRow",align:"center"}
			    ]],
		});
		
		//如果是有条件查询的,可以通过表单提交,无刷新方式重新请求并渲染数据表格,不用另外写ajax
		// form.on("submit(id选择器)",function(data){
		// 	tableIns.reload({
		// 		where:data.field,	//form表单条件查询的K-V
		// 		page:{
		// 			curr:1		//重新从第 1 页开始
		// 		}
		// 	})
		// 	return false;
		// })
		

	});
</script>
<!-- 头部工具栏：导出excel、打印、筛选列功能 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
  </div>
</script>

<!-- 行工具栏 -->
<script type="text/html" id="toolbarRow">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-sm" lay-event="del">删除</a>
</script>